<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true">
       <el-form-item label="用户名" prop="operName">
        <el-input
          v-model="queryParams.operName"
          placeholder="请输入角色名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="query(queryParams)"
        />
       </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query(queryParams)">搜索</el-button>
        <el-button @click="resetQuery()">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border>
      <el-table-column prop="operId" label="日志主键" width="120"/>
      <el-table-column prop="title" label="操作模块" width="120" />
      <el-table-column prop="businessType" label="业务类型" width="120" />
      <el-table-column prop="method" label="api方法" width="120" />
      <el-table-column prop="requestMethod" label="请求方式" width="120" />
      <el-table-column
        prop="operName"
        label="操作人员"
        width="120"
        fixed="left"
      >
      </el-table-column>

      <el-table-column
        prop="operUrl"
        label="请求url"
        width="120"
      >
      </el-table-column>
      <el-table-column prop="operIp" label="操作地址" width="120" />
      <el-table-column prop="status" label="操作状态" width="120" />
      <el-table-column prop="errormsg" label="错误消息" width="120" />
      <el-table-column prop="opertime" label="操作时间" fixed="right" width="120" />
    </el-table>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {queryByName} from "@/api/operLog"
let queryFormRef=ref();
let tableData=ref([]);
//查询
let queryParams=ref({
operName:"",
})
let query=function(queryForm){
  console.log(queryForm.operName)
    queryByName(queryForm.operName).then((result) => {
      tableData.value=result.data
    }).catch((err) => {
    });
}
let resetQuery=function(){
    queryFormRef.value.resetFields();
}
</script>

<style></style>
